<template>
  <!-- 群设置界面 -->
  <div class="manage-container">
    <div class="backbar fix-bar">
      <div class="back flex-center" v-hammer:tap="(ev) => $router.push({name: 'GroupSetting'})">
        <i class="fa fa-angle-left fa-lgl"></i>
        <span>返回</span>
      </div>
    </div>

    <div class="section-wrapper">
      <div class="list-item" @click="onAssign">
        <div>群主管理权转让</div>
        <div>
          <i class="fa fa-angle-right"></i>
        </div>
      </div>
    </div>

    <div class="section-wrapper">
      <div class="list-item" @click="onManage">
        <div>群管理员</div>
        <div class="group-nick"></div>
        <div>
          <i class="fa fa-angle-right"></i>
        </div>
      </div>
    </div>

  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { RawLocation } from "vue-router";
import { DIALOGUE, ImClient, MsgTypeKV } from "@/api/socket/imClient";
import {
  Webim,
} from "@/utils/types";
import { Action, Mutation, Getter, namespace } from "vuex-class";
import { Response } from "@/api/bean";
import MessageMixin from "@/mixins";
import { JoinType } from '@/utils/constants';
declare const webim: Webim;
declare const $Vue: Vue;
const userModule = namespace("userModule");
const chatModule = namespace("chatModule");

@Component<GroupManage>({
  mixins: [MessageMixin]
})
export default class GroupManage extends Vue {
 
  @userModule.State("groupMembers") groupMembers: any;

  @chatModule.State("groupSetting") groupSetting: any;

  private status: boolean = true;

  private eventList: Array<string> = [
    "$getAdminList",
  ];

  /**
   * 生命周期函数
   */
  protected mounted() {
    this.initEvents(this.eventList);
    this.sendMessage(MsgTypeKV.getMemberList, {
      groupId: sessionStorage.getItem("groupId")
    });
  }

  /**
   * 转让群
   */
  private onAssign() {
    this.$router.push({
      name: 'AssignOwner',
    });
  }


  /**
   * 管理员
   */
  private onManage() {
    this.$router.push({
      name: 'AssignAdmin',
    });
  }


}
</script>

<style lang="stylus" scoped>
.manage-container
  width 100%
  height 100%
  background #f1f1f1
  box-sizing border-box
  position fixed
  top 0 
  left 0 
  .section-wrapper
    margin-top 6px
    .list-item 
      width 100% 
      height 48px 
      display flex
      justify-content space-between
      align-items center
      background white
      padding 2px 12px
      box-sizing border-box
      border-bottom 1px solid #f5f5f5

</style>

